<template>
    <div class="mine">
        <div class="alldenglu" v-show="!getuser" >
            <div class="tops">
                <router-link to="/">
                    <img src="../../static/images/idid_ie3wmnbvgftginzsmizdambqgayde_35x52.png"/>
                </router-link>
                <p>登陆 - 美丽说</p>
                <router-link tag="a" to="">注册</router-link>
            </div>
            <img class="QQ" src="../../static/images/upload_ieztmnzwmztdsoddgizdambqgyyde.png" />
            <p class="register">
            <span> 美丽说账号登录</span>
            </p>
            <div class="denglu">
                <input type="text" placeholder="QQ/银行卡号" ref="user" required />
                <input type="password" placeholder="密码/银行密码" ref="pas" required />
                <button @click="denglu">登陆</button>
            </div>
            <router-link tag="p" to="" class="forget">忘记密码？</router-link>
        </div>
        <div class="mymine" v-show="getuser">
            <div class="tops">
                <router-link to="/">
                    <img src="../../static/images/idid_ie3wmnbvgftginzsmizdambqgayde_35x52.png"/>
                </router-link>
                <p>个人中心</p>
                <span @click="retret">退出</span>
            </div>
            <div class="share">
                <p>成为分享达人</p>
                <p>分享赚钱</p>
            </div>
            <div class="indent">
                <div :class="{active:styles=='alldingdan'}" @click="styles='alldingdan'">
                    <i class="iconfont">&#xe69a;</i>
                    <p>全部订单</p>
                </div>
                <div :class="{active:styles=='fukuan'}" @click="styles='fukuan'">
                    <i class="iconfont" >&#xe601;</i>
                    <p>代付款</p>
                </div>
                <div  :class="{active:styles=='shouhuo'}" @click="styles='shouhuo'">
                    <i class="iconfont" >&#xe693;</i>
                    <p>待收货</p>
                </div>
                <div  :class="{active:styles=='pingjia'}" @click="styles='pingjia'">
                    <i class="iconfont" >&#xe609;</i>
                    <p>待评价</p>
                </div>
            </div>
            <div class="meiding" v-show="!isShow.length">
                <img src="../../static/images/89171424394292530.png" />
                <p>你还没有相关的订单</p>
            </div>
            <div class="myshangpin" v-show="isShow.length">
                <p>
                    <span>商家：美丽优选</span>
                    <span>代发货</span>
                </p>
                <div v-for="(val,index) in isShow" :key="index">
                    <div>
                        <img :src="val.img">
                    </div>
                    <div>
                        <p>{{val.title}}</p>
                        <p>
                            <span>数量：{{val.cartNum}} </span>
                            <span>
                                ￥{{val.lowPrice}}
                            </span>
                        </p>
                    </div>
                </div>
                <div>
                    <p>合计：<span>￥{{sum}}</span></p>
                    <button>提醒商家发货</button>
                </div>
            </div>
            <span>木有了...</span>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                styles : "alldingdan"
            }
        },
        methods : {
            denglu(){
                if(this.$refs.user.value=="admin" && this.$refs.pas.value=="123456"){
                    this.$store.state.user.name = this.$refs.user.value;
                    this.$store.state.user.pasw = this.$refs.pas.value;
                }else{
                    console.log("密码错误")
                }
            },
            retret(){
                this.$store.state.user.name="";
                this.$store.state.user.pasw="";
            }
        },
        computed :{
            getuser(){
                return this.$store.state.user.name
            },
            isShow(){
                return this.$store.getters.dingdan
            },
            sum(){
                var num = 0;
                var all = this.$store.state.cartList;
                for(var i=0;i<all.length; i++){
                    num +=all[i].cartNum*all[i].lowPrice
                }
                return num;
            }
        }
    }
</script>
<style scoped>
    @font-face {
        font-family: 'iconfont_mine';  /* project id 381863 */
        src: url('//at.alicdn.com/t/font_381863_1cbtlyalw9ffajor.eot');
        src: url('//at.alicdn.com/t/font_381863_1cbtlyalw9ffajor.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_381863_1cbtlyalw9ffajor.woff') format('woff'),
        url('//at.alicdn.com/t/font_381863_1cbtlyalw9ffajor.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_381863_1cbtlyalw9ffajor.svg#iconfont') format('svg');
    }
    .iconfont{
        font-family: iconfont_mine;
    }
    .myshangpin{
        background: #fff;
        padding: 0 .6rem;
        display: flex;
        flex-flow: nowrap column;
        font-size: .64rem;
        color: #636363;
    }
    .myshangpin>p:first-child{
        width: 100%;
        height: 1.7rem;
        line-height: 1.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin:.4rem 0 0 0 ;
        border-bottom: 1px solid #ccc;
    }
    .myshangpin>p:first-child span:nth-child(2){
        color: #e989a5;
    }
    .myshangpin>div{
        display: flex;
        flex-flow: nowrap row;
        justify-content: space-between;
        padding: .3rem 0;
        border-bottom: 1px solid #ccc;
    }
    .myshangpin>div div:first-child{
        width: 30%;
        height: 3rem;
        overflow: hidden;
    }
    .myshangpin>div div:last-child{
        width: 66%;
        display: flex;
        flex-flow: nowrap column;
        justify-content: space-between;
    }
    .myshangpin>div div:last-child p{
        display: flex;
        flex-flow: nowrap row;
        justify-content: space-between;
    }
    .myshangpin>div div:first-child img{
        width: 100%;
    }
    .myshangpin>div:last-child{
        height: 4rem;
        display: flex;
        border-bottom: none;
        flex-flow: nowrap column;
        align-items: flex-end;
        justify-content: space-around;
    }
    .myshangpin>div:last-child p span{
        color: #e989a5;
    }
    .myshangpin>div:last-child button{
        padding: .1rem .4rem;
        background: #e989a5;
        color: #fff;
        border:none;
        border-radius: 3px;
    }
    .meiding{
        width: 100%;
        padding: 2rem 0 0 0;
        display: flex;
        flex-flow: nowrap column;
        align-items: center;
        color: #6e6e6e;
        font-size: .6rem;
    }
    .meiding p{
        font-size: .7rem;
        color: #636363;
        margin: .5rem 0 1rem 0;
    }
    .indent{
        width: 100%;
        height: 3rem;
        font-size: .7rem;
        display: flex;
        flex-flow: nowrap row;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        margin: .3rem 0 0 0;
    }
    .indent .active{
        color: #e989a5;
    }
    .indent div{
        color: #636363;
        text-align: center;
        font-size: .56rem;
    }
    .indent div i{
        font-size: .6rem;
    }
     .indent div:nth-child(2) i{
         font-size: .7rem;
     }
    .alldenglu,.mymine{
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-flow: nowrap column;
    }
    .mymine{
        background: #efefef;
    }
    .share{
        display: flex;
        width: 100%;
        background: #fff;
        margin: .3rem 0 0 0;
        padding: 0 .6rem;
        height: 2rem;
        line-height: 2rem;
        justify-content: space-between;
        color: #636363;
        font-size: .64rem;
    }
    .share p:first-child{
        text-indent: 1.3rem;
        background: url(/static/images/dianxingxing.jpg) no-repeat left center;
        background-size: 20%;
    }
    .share p:last-child{
        padding: 0 .7rem 0 0;
        background: url(/static/images/170706_7d6f70iaill2c55je7h09225ida77_21x33.png) no-repeat right center;
        background-size: 11%;
    }
    .tops{
        height: 1.88rem;
        width: 100%;
        display: flex;
        padding: 0 .6rem;
        flex-flow: nowrap row;
        justify-content: space-between;
        align-items: center;
        font-size: .7rem;
        color: #666;
        border-bottom: 1px solid #ddd;
        background: #fff;
    }
    .tops img{
        width: .42rem;
    }
    .tops a{
        color: #666;
    }
    .QQ{
        width: 4.2rem;
        margin: 1.4rem auto;
    }
    .register{
        width: 94%;
        border-bottom: 1px solid #dddddd;
        font-size: .56rem;
        margin: 0 auto;
        height: 1rem;
        line-height: 2rem;
        text-align: center;
        color: #666;
    }
    .register span{
        background: #fff;
        padding: 0 .35rem;
    }
    .denglu{
        width: 100%;
        padding: 1.2rem .6rem .48rem .6rem;
        display: flex;
        flex-flow: nowrap column;
        justify-content: center;
    }
    .denglu input{
        height: 1.85rem;
        width: 100%;
        background: #efefef;
        font-size: .7rem;
        margin: 0 0 .4rem 0;
        text-indent: .5rem;
        border:none;
        border-radius: .3rem;
        color: #333;
        outline: none;
    }
    .denglu button{
        background: #ff5777;
        color: #fff;
        margin: .3rem 0 0 0 ;
        font-size: .8rem;
        width:100%;
        border:none;
        outline: none;
        height: 1.85rem;
        border-radius: .3rem;
    }
    .forget{
        color: #555;
        font-size: .56rem;
        text-align: right;
        padding: 0 .6rem;
    }
    .mymine>span{
        color: #666;
        font-size: .64rem;
        display: inline-block;
        margin: .3rem auto 1rem auto;
    }
    .mine{
        background: #efefef;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
    }
</style>
